<template>
	<view class="my">
		<!-- 顶部个人中心 -->
		<view class="tab">
			<view class="left">
				<image src="../../static/titleImage.png" mode=""></image>
			</view>
			<view class="right">
				<view class="name">
					vicky李
				</view>
				<view class="num">
					<text  v-if="phone!= ''">{{phone}}</text>
					<button v-else  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="bindphone" style="margin-left: 0;">绑定手机号</button>
				</view>
				
			</view>
		</view>
		<!-- 大数据标签 -->
		<view class="lots">
			<view class="tit">
				我的大数据标签
			</view>
			<view class="tips">
				<text>常用精洗A</text>
				<text>短发</text>
				<text>中性发质</text>
			</view>
		</view>
		<!-- 个性标签 -->
		<view class="lots">
			<view class="tit">
				我的大数据标签
			</view>
			<view class="tips">
				<text>90后</text>
				<text>躺鸡萌妹</text>
				<view class="img"><image src="../../static/个人中心%20副本_slices/+@2x.png" mode=""></image></view>
			</view>
		</view>
		<!-- 使用记录 -->
		<view class="foot">
			<view class="v1">
			<image src="../../static/个人中心%20副本_slices/Group@2x.png"></image>
			<text @click="toUesList">使用记录</text>
		<view class="svg">
		<image src="../../static/个人中心%20副本_slices/svg%202@2x.png" mode=""></image>
		</view>
			</view>
			<view class="v2">
		<image src="../../static/个人中心%20副本_slices/编组%206@2x.png"></image>
		<text>意见反馈</text>
		<view class="svg">
		<image src="../../static/个人中心%20副本_slices/svg%202@2x.png" mode=""></image>
		</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			phone:''
			}
		},
		onLoad() {
       this.getphone(),
			 this.getPhoneNumber()
		},
		methods: {
   toUesList(){
	   uni.navigateTo({
		   url:"../useingList/useingList"
	})
      },
			getphone(){
			 let str = '18345678922';
			  let pre =  str.substr(0,3);
			  let next = str.substr(7,4);
			  this.phone  =  pre + '****' + next;
			},
			getPhoneNumber(e) {
			   console.log(e)
			}
			
			

		}
	}
</script>

<style lang="less">
	.my {
		padding: 30rpx;
	

		.tab {
			display: flex;
			height: 160rpx;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #C0C0C0;
		}

		.left {

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}

		.right {
			font-size: 36rpx;
			margin-left: 16rpx;

			.name {
				font-size: 42rpx;
			}
   
			.num {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				view {
					text-align: center;
					padding: 10rpx;
					font-size: 26rpx;
					background: rgba(254, 220, 0, 1);
					border-radius: 6rpx;
					margin-left: 42rpx;
				
				}
		
		button{
			text-align: center;
			font-size: 26rpx;
			background: rgba(254, 220, 0, 1);
			border-radius: 6rpx;
			margin-left: 42rpx;
		}
			}
		
		}
	// 大数据
	.lots{
		margin-top: 30rpx;
		.tit{
			height:50rpx;
			font-size:38rpx;
			font-weight: 700;
		}
	}
	// 标签3
	.tips{
			display: flex;
			font-size: 30rpx;
			text{
				margin: 32rpx  0;
				margin-right: 40rpx;
				background:rgba(254,220,0,1);
				box-shadow:0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.1);
				border-radius:40rpx;
		    padding: 18rpx 30rpx;
			}
			.img{
				margin: 32rpx  0;
				display:flex;
				justify-content: center;
        align-items: center;
				width:148rpx;
				height:80rpx;
				background:rgba(254,220,0,1);
				box-shadow:0px 2rpx 10rpx 0rpx rgba(0,0,0,0.1);
				border-radius:40rpx;
				image{
					width: 26rpx;
					height: 26rpx;
				}
			}
			
		}
		
		.v1,.v2{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			height:96rpx;
			background:rgba(255,255,255,1);
			box-shadow:0px 2rpx 10rpx 0rpx rgba(0,0,0,0.1);
			border-radius:12rpx;
			padding: 0 34rpx;
			image{
				width:56rpx;
				height:56rpx;
			}
			view{
				width: 36rpx;
			}
			text{
				flex: 1;
				font-size: 38rpx;
				margin-left: 20rpx;
			}
		}
		.svg{
			image{
				width: 18rpx;
				height: 32rpx;
			}
		}
	}
</style>
